<script setup lang="ts">
import {onBeforeMount, onMounted, ref} from "vue"
import HeadNav from "./Head.vue"
import TaskInfo from "./Task.vue"
import NoInfo from "../../../components/MainBody/NoInfo/index.vue"
import Pagination from "../../../components/MainBody/Pagination/index.vue"
import { useTasksStore } from "../../../store/WorkPlaceStore/useTasksStore.ts";
import { storeToRefs } from "pinia";

const tasksStore = useTasksStore()
const {tasks} = storeToRefs(tasksStore)

const noData = ref(false)   //判断数据有无
const allDataCount = ref(tasks.value.length) //数据数量

if(allDataCount.value == 0){noData.value = true}


const newData:any = ref([])

const showData = (start:number)=>{
    newData.value = []
    //这里设置每页几条信息
    for(let i = start;i<(start+8);i++){
        if(tasks.value.length == i){return}
        newData.value.push(tasks.value[i])
    }
    console.log(newData.value)
}

// 翻页
const updatePagin = (Data:any)=>{
    const start = (Data.pagin-1)*8
    showData(start)
}

onBeforeMount(()=>{
    showData(0)
})

</script>

<template>
    <div class="i">
        <HeadNav/>
        <NoInfo v-if="noData" />
        <div v-else>
            <TaskInfo v-for="(item,index) in newData" :key="index" :item-index="index" :id="item.id" :task="item.task" :publisher="item.publisher" :publishTime="item.publishTime" :status="item.status" :taskDetail="item.taskDetail" />
            <Pagination :allDataCount="allDataCount" @updatePagin="updatePagin" />
        </div>
    </div>
</template>

<style scoped>
.i{
    margin-top:1vh;
    width:75vw;
    min-height: 70vh;
    background-color: white;
}
</style>